<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1 总的 position: relative; 左边 position: absolute; width: 100px; 右边 position: absolute; top: 0; right: 0; width: 200px; 中间margin-left: 100px;margin-right: 200px;
        2 总的 display:flex;  左边 width:100px; 右边width:100px; 中间 flex: 1; 在只有一个flex的情况下,谁得到flex,谁就瓜分剩余的部分
        3 左边 float: left; width:100px; 右边 float: right; width:100px; 中间 margin-left:100px; margin-right:100px;
    -->
    <div class="outer">
        <div class="left">123</div>
        <div class="center">456</div>
        <div class="right">789</div>
    </div>
</body>
<style>
/* .outer { -----1
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
} */


.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
</style>
</html>